import React, { memo, useEffect, useState } from 'react'
import {get,add,del,gai,xian,sou,mai} from '../api/ins'
import { Space, Table, Tag, Drawer,Button, Checkbox, Form, Input} from 'antd';
const Home = memo(() => {
  const  [list,setlist]=useState([])
  const fn=async()=>{
      let res= await get()
      setlist(res.data)
  }
  useEffect(()=>{
       fn()
  },[])

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
   
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
           <button onClick={async()=>{
           setuid(record.id)
           setOpen(true)
          let res= await xian(record.id)
       
          console.log(res.data);
          // 表单方法数据回显
          biao.setFieldsValue(res.data);

          }}>编辑</button>
           <button onClick={async()=>{await del(record.id);fn()}}>删除</button>
           
        </Space>
      ),
    },
  ];
  // 保存一下查找的id
  const [uid,setuid]=useState('')
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('bottom');
  const showDrawer = () => {
    setOpen(true);
  };
  const onChange = (e) => {
    setPlacement(e.target.value);
  };
  const onClose = () => {
    setOpen(false);
  };
  // 表单的回调
  const onFinish =async (values) => {
    console.log(values);
      if(uid==''){
        await add({...values,id:Date.now(),key:Date.now()})
        fn()
        setOpen(false)
      }else {
      await  gai(uid,values)
      fn()
      }
     
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  // 声明表单实例
  const [biao]=Form.useForm()
  // 搜索事件
  const seach= async(values)=>{
    console.log(values);
       let res= await mai(values)
         setlist(res.data)
  }
  // 价格搜索
  const jia= async(values)=>{
     let res=await mai(values)
     setlist(res.data)
}
  return (
    <div>                
                              {/*搜索功能  */}
                              <Form
    name="sousuo"
    form={biao}
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={seach}
  
  >
    <Form.Item
      label="姓名"
      name="name_like"
     
    >
      <Input/>
    </Form.Item>


    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        搜索
      </Button>
    </Form.Item>
  </Form>
  {/* 价格所搜 */}
  <Form
    name="jiage"
   
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={jia}
  
  >
    <Form.Item
      label="最小"
      name="price_gte"
     
    >
      <Input/>
    </Form.Item>
    <Form.Item
      label="最大"
      name="price_lte"
     
    >
      <Input/>
    </Form.Item>


    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        搜索
      </Button>
    </Form.Item>
  </Form>
                                                {/* 用来清空表单元素 */}
      <button onClick={()=>{setOpen(true);biao.resetFields();setuid('')}}>增加</button>
      <Table columns={columns} dataSource={list} />
      {/* 使用抽屉 */}
      <Drawer
        title=""
        placement={placement}
        width={500}
        onClose={onClose}
        open={open}
      
      >
        {/* 抽屉里面放一个表单  */}
        <Form
    name="basic"
    form={biao}
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="姓名 "
      name="name"
      rules={[
        {
          required: true,
          message: '请输入名字!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="价格"
      name="price"
      rules={[
        {
          required: true,
          message: '请输入价格',
        },
        // {
        //   type:'number',
        //   message: '必须是数字',
        // }
      ]}
    >
      <Input.Password />
    </Form.Item>


    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        确定
      </Button>
    </Form.Item>
  </Form>
      </Drawer>
    </div>
  )
})

export default Home